<template>
  <v-layout no-gutters>
    <u-col>
      <v-app-bar app flat>
        <v-btn icon to="/">
          <v-icon>home</v-icon>
        </v-btn>
        <v-toolbar-title>动态</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn @click="addTalk">
          发布
        </v-btn>
      </v-app-bar>
      <v-divider></v-divider>
      <v-textarea
          outline
          rows="7"
          v-model="talkContent"
          placeholder="发帖介绍自己，年龄，职业，爱好，喜欢什么样的异性，附上自己的照片和微信，让喜欢的人加你微信"
      ></v-textarea>
      <!--<v-chip v-for="tag in tags" :outline="!tag.selected" close
              dark
              :color="$const.colorObj[tag.color]"
              @click="selectTagClick(tag)"
      >
          &lt;!&ndash;                                @click="tag.selected=!tag.selected"&ndash;&gt;
          {{tag.name}}
      </v-chip>-->
      <!--<v-chip label color="pink" text-color="white" @click="jumpSearchPage">
          <v-icon left>label</v-icon>
          Tags
      </v-chip>

      <div>标签 #标签</div>
      <div>地点</div>
      <div>已选标签</div>
      <div>
          最近使用的标签
      </div>

      <div>热门标签</div>
      <div>更多标签</div>-->


      <input v-show="false" id="previewImg" type="file" accept="image/*" style="opacity: 0;width: 0"
             @change="previewImg">

      <!--<v-combobox
          v-model="chips"
          :items="tags.map(item=>item.name)"
          label="Your favorite hobbies"
          chips
          clearable
          solo
          multiple
      >
        <template v-slot:selection="data">
          <v-chip
              :selected="res.data.selected"
              close
              @input="remove(res.data.item)"
          >
            <strong>{{ res.data.item }}</strong>
          </v-chip>
        </template>
      </v-combobox>-->
      <div class="flex-row row-between">
        <label for="previewImg">
          <v-icon>camera_alt</v-icon>
        </label>
        <!--        <mt-switch v-model="isMatchType">是否为匹配帖</mt-switch>-->
      </div>

      <div v-show="showsImgSrcs.length" class="flex-row">
        <div v-for="src in showsImgSrcs" class="w30r mr-10px mb-10px">
          <v-img :src="src" height="120" width="100%"/>
        </div>
        <label v-if="showsImgSrcs.length<3" class="row-all-center w30r h120px mr-10px bd-dashed" for="previewImg">
          <v-icon x-large>camera_alt</v-icon>
        </label>
      </div>

      <!--        <search v-model="tags" :visible="showSearch" @select="tagsSelect"></search>-->

      <!--<mt-button style="margin-left: 50px" @click="postImgs">上传</mt-button>-->
    </u-col>
  </v-layout>
</template>
<script lang="ts">
  import {Vue, Component, Prop} from 'vue-property-decorator'
  import TalkAPI from "@/views/talk/TalkAPI"
  import RouterName from "@/const/RouterName"
  import TalkImg from "@/model/TalkImg"

  @Component
  export default class TalkAdd<V> extends Vue {
    showsImgSrcs: string [] = []
    talkImgs: TalkImg [] = []
    talkContent: string = ''
    talkImgFiles: any [] = []
    isMatchType: boolean
    showSearch: boolean = false
    chips: any []


    jumpSearchPage() {
      this.showSearch = true
    }

    previewImg({target}: Event) {
      if (this.showsImgSrcs.length > 2) {
        this.$alert("动态暂时最多支持三张照片")
        return
      }
      this.$img.getImgObj(target).then((imgObj) => {
        this.showsImgSrcs.push(imgObj.src)
        this.talkImgFiles.push(imgObj.file)
      })
    }

    addTalk() {
      this.talkImgs = []
      if (this.showsImgSrcs.length === 0) {
        this.publishTalk()
      } else {
        this.uploadImgList().then(() => this.publishTalk())
      }
    }

    publishTalk() {
      TalkAPI.addTalk(this.talkContent, this.talkImgs)
        .then(() => this.$routerTo(RouterName.talk))
    }

    async uploadImgList() {
      for (const imgFile of this.talkImgFiles) {
        await this.$img.uploadImgAPI(imgFile, this.$const.uploadType.talkImg).then(res => {
          this.talkImgs.push(res.data)
        }).catch(() => {
          throw null
        })
      }
    }
  }
</script>
<style scoped>
  @import 'index.scss';
</style>
